<template>
    <div class="tech-website">
        <!-- 横幅部分 -->
        <div class="banner">
            <div class="banner-content">
                <div class="title-wrap">
                    <h1>我们用 AI 生产力构建下一代商业</h1>
                </div>
                <div class="tag-bar">
                    <span class="prefix">For</span>
                    <span class="tag">企业领袖</span>
                    <span class="tag">数字化部门</span>
                    <span class="tag">创新团队</span>
                    <span class="conjunction">and</span>
                    <span class="tag">AI创新者</span>
                </div>
            </div>
        </div>
        <div class="solutions-section">
            <div class="title-wrapper">
                <span class="main-title" style="font-size: 24px;">技术基座</span>
                <span class="sub-title">Technical Base</span>
            </div>
            <div class="cards-grid">
                <div class="solution-card">
                    <div class="icon gear-icon"></div>
                    <h3>大模型</h3>
                    <p>基于深度学习算法，通过对海量的飞机运行数据进行训练而形成，从而建立起飞机正常运行状态和故障状态的模型</p>
                    <button class="action-btn">联系了解更多</button>
                </div>
                <div class="solution-card">
                    <div class="icon puzzle-icon"></div>
                    <h3>知识图谱</h3>
                    <p>采用自然语言处理技术、机器学习算法对数据进行挖掘和分析，提取出实体以及它们之间的关系，最终构建成一个庞大的知识网络</p>
                    <button class="action-btn">联系了解更多</button>
                </div>
                <div class="solution-card">
                    <div class="icon cycle-icon"></div>
                    <h3>向量数据库</h3>
                    <p>将飞机的各种数据（如传感器数据、图像数据、文本数据等）通过特征提取算法转换为向量表示</p>
                    <button class="action-btn">联系了解更多</button>
                </div>
            </div>
        </div>
        <div class="ai-tech-base" id="products">
            <div class="section-header">
                <div class="green-bar"></div>
                <h2>产品案例 PRODUCT</h2>
            </div>

            <div class="content-container">
                <div class="left-column">
                    <div class="feature-item">
                        <!-- 添加动画类 -->
                        <div class="item-number animate-on-scroll slide-in-left">01</div>
                        <h3 class="animate-on-scroll slide-in-left delay-100">锋眼"航空故障预测与健康管理"（PHM）系统</h3>
                        <ul>
                            <li class="animate-on-scroll slide-in-left delay-200">
                                公司基于航空业大数据并依据航空器各个系统故障机理，解码分析对应特征数据，针对国内外主流机型提供从系统级到部件级的故障预测与健康管理解决方案，实现航空器的健康监测、故障预测、维修管理、可靠性管理、航材库存预测等功能。“锋眼”系统有效突破国外技术封锁，填补国内民用航空PHM应用的空白，实现了国产替代。

                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right-column">
                    <!-- 图片从右侧滑入 -->
                    <img src="/public/images/PHM-bg.png" alt="锋眼PHM系统"
                        class="main-visual animate-on-scroll slide-in-right" />
                </div>
            </div>

            <div class="content-container" style="background: linear-gradient(to top, #0a0a0a 0%, #030315 100%)">
                <div class="right-column">
                    <!-- 第二个图片从左侧滑入 -->
                    <img src="/public/images/train.jpg" alt="轨道交通PHM系统"
                        class="main-visual animate-on-scroll slide-in-left" />
                </div>
                <div class="left-column">
                    <div class="feature-item">
                        <div class="item-number animate-on-scroll slide-in-right">02</div>
                        <h3 class="animate-on-scroll slide-in-right delay-100">锋眼"轨道交通故障预测与健康管理"（PHM）系统</h3>
                        <ul>
                            <li class="animate-on-scroll slide-in-right delay-200">
                                万维高科轨交车辆PHM系统针对轴承、车轮、蓄电池、客室空调、辅助空压机、防滑阀、受电弓、电气配电盘系统等核心模块进行故障监控和预测，实现轨道交通车辆由计划修向状态修转变，降低维修成本，延长核心部件及整车使用寿命。该产品经北京铁路局、上海铁路局、中车青岛四方、大秦铁路、神华铁路等单位长期使用验证，能够快速展现故障与多种因素的关联度，为故障原因分析和快速维修决策提供数据支持，优化延长检修周期，平均能为用户降低超30%维护成本。

                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="content-container">
                <div class="left-column">
                    <div class="feature-item">
                        <div class="item-number animate-on-scroll slide-in-left">03</div>
                        <h3 class="animate-on-scroll slide-in-left delay-100">X-gear "智能AI助手"</h3>
                        <ul>
                            <li class="animate-on-scroll slide-in-left delay-200">
                                万维高科基于大模型+知识图谱“X-gear”智能AI助手，依托行业真实运行数据构建，包含航空、轨交等领域设备零部件组成结构关系外，还包含零部件、子系统等的故障及故障模式、故障现象、故障原因、故障间关系、故障处理措施等内容，面向运维、运营等多个领域，提供智能辅助决策、查询、数据预测、知识管理等功能。

                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right-column">
                    <img src="/public/images/factory3.jpg" alt="X-gear智能助手"
                        class="main-visual animate-on-scroll slide-in-right" />
                </div>
            </div>
        </div>
        <div class="carousel" id="solution">
            <div class="section-header">
                <div class="line"></div>
                <div class="title-box">
                    <span class="main-title" style="font-size: 34px;">解决方案</span>
                    <span class="sub-title">SOLUTION</span>
                </div>
                <div class="line"></div>
            </div>
            <n-carousel show-arrow autoplay interval="1200" effect="card"
                prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
                next-slide-style="transform: translateX(50%) translateZ(-800px);" :show-dots="false">
                <!-- 轮播项循环（关键修改：使用 item.subCards 渲染子卡片） -->
                <n-carousel-item v-for="(item, index) in carouselData" :key="index" :style="{ width: '60%' }">
                    <!-- 轮播图（保持原逻辑） -->
                    <img class="carousel-img" :src="item.imgUrl" :style="{ opacity: 0.7 }">

                    <!-- 叠加内容容器 -->
                    <div class="carousel-overlay">
                        <!-- 主标题（保持原逻辑） -->
                        <h3 class="overlay-title">{{ item.title }}</h3>
                        <!-- 主描述（保持原逻辑） -->
                        <p class="overlay-desc">{{ item.desc }}</p>

                        <!-- 子卡片循环（关键修改：使用 item.subCards） -->
                        <div class="sub-cards-container">
                            <div class="customer-portrait-card" v-for="(card, cardIndex) in item.subCards"
                                :key="cardIndex">
                                <!-- 卡片文字区域 -->
                                <div class="text-panel">
                                    <h3 class="card-title">{{ card.title }}</h3>
                                    <p class="card-desc">{{ card.desc }}</p>
                                </div>
                                <!-- 卡片图标区域 -->
                                <div class="icon-panel">
                                    <img :src="card.extraImg" alt="解决方案图标" class="portrait-icon">
                                </div>
                            </div>
                        </div>
                    </div>
                </n-carousel-item>
            </n-carousel>
        </div>
        <section class="advantage-section">
            <!-- 顶部标题栏 -->
            <div class="header">
                <div class="green-bar"></div>
                <h2 class="main-title" style="font-size: 24px;">我们的优势 Our Advantage </h2>
            </div>
            <div style="margin-left: 24%;">
                <!-- 核心功能对比区 -->
                <div class="core-features">
                    <!-- 企业大脑板块 -->
                    <div class="feature-card">
                        <div class="card-header">
                            <div class="icon icon-brain"></div>
                            <div class="header-text">
                                <span>基于大量真实数据进行模型预测</span>
                            </div>
                        </div>
                        <table class="feature-table">
                            <thead>
                                <tr>
                                    <th>企业大脑核心数据</th>
                                    <th>大量真实数据</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, i) in enterpriseBrain" :key="i">
                                    <td>{{ item.name }}</td>
                                    <td :class="item.type"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 知识库板块 -->
                    <div class="feature-card">
                        <div class="card-header">
                            <div class="icon icon-knowledge"></div>
                            <div class="header-text">
                                <span>专业人才自研优秀产品</span>
                            </div>
                        </div>
                        <table class="feature-table">
                            <thead>
                                <tr>
                                    <th>企业商业应用核心技术</th>
                                    <th>自研技术产品</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, i) in knowledgeBase" :key="i">
                                    <td>{{ item.name }}</td>
                                    <td :class="item.type"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 底部优势板块 -->
                <div class="bottom-features">
                    <!-- 技术优势 -->
                    <div class="feature-block">
                        <div class="icon icon-tech"></div>
                        <h3>领先的技术水平和产品完成度</h3>
                        <ul>
                            <li v-for="(item, i) in techAdvantage" :key="i">{{ item }}</li>
                        </ul>
                    </div>

                    <!-- Agent 矩阵优势 -->
                    <div class="feature-block">
                        <div class="icon icon-agent"></div>
                        <h3>全渠道、全客户生命周期、全域投放管理为抓手的 agent 矩阵</h3>
                        <ul>
                            <li v-for="(item, i) in agentAdvantage" :key="i">{{ item }}</li>
                        </ul>
                    </div>
                </div>
            </div>

        </section>
        <!-- 合作伙伴 -->
        <div class="bg-#f7faff w-full  flex flex-col items-center "
            style="background-color: #02020f;padding-top: 50px;">
            <div class="header">
                <div class="green-bar"></div>
                <h2 class="main-title" style="font-size: 24px;">合作伙伴 PARTNER</h2>
            </div>
            <div class="w-90vw flex flex-wrap m-b-40">
                <div v-for="(partner, indx) in dataStore.partnerList" :key="indx"
                    class="flex-grow-0 flex-shrink-0 flex-basis-1/5">
                    <div
                        class="hoverImg b-1px b-solid b-#ebeef5 m-12px bg-#fff w-16.5vw h-7vw flex justify-center items-center px-10px ">
                        <img class="" :src="partner" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import lunbo1 from '/public/images/lunbo1.png'
import lunbo2 from '/public/images/lunbo2.png'
import lunbo3 from '/public/images/lunbo3.png'
import lunbo4 from '/public/images/lunbo4.png'
import soIcon1 from '/public/images/soIcon1.png'
import soIcon2 from '/public/images/soIcon2.png'
import shangfei from '/public/images/partnersLogo/shangfei.png'
import minhang from '/public/images/partnersLogo/minhang.png'
import nanhang from '/public/images/partnersLogo/nanhang.jpeg'
import donghang from '/public/images/partnersLogo/donghang.jpeg'
import qinghang from '/public/images/partnersLogo/qinghang.png'
import shenhang from '/public/images/partnersLogo/shenhang.jpeg'
import shunfeng from '/public/images/partnersLogo/shunfeng.jpeg'
import zhongzhou from '/public/images/partnersLogo/zhongzhou.jpeg'
import beijiaoda from '/public/images/partnersLogo/beijiaoda.jpg'
import minhangdaxue from '/public/images/partnersLogo/minhangdaxue.jpg'
import guangzhouminhang from '/public/images/partnersLogo/guangzhouminhang.png'


export default {
    name: 'AdvantageSection',
    data() {
        return {
            dataStore: {
                partnerTitle: '合作伙伴',
                partnerList: [shangfei, minhang, nanhang, donghang, qinghang, shenhang, shunfeng, zhongzhou, beijiaoda, minhangdaxue, guangzhouminhang]
            },
            // 轮播数据（关键修改：每个项添加 subCards 字段）
            carouselData: [
                {
                    imgUrl: lunbo1,
                    title: '智慧工业',
                    desc: '覆盖故障诊断、故障预测、运维辅助决策等6大核心场景，助力工业设备全生命周期智能化管理',
                    // 智慧工业对应的子卡片
                    subCards: [
                        {
                            title: '故障诊断',
                            desc: '实时监测设备状态，精准定位故障点',
                            extraImg: soIcon2
                        },
                        {
                            title: '故障预测',
                            desc: '基于历史数据预测潜在故障风险',
                            extraImg: soIcon2
                        },
                        {
                            title: '运维辅助决策',
                            desc: '提供维修方案推荐与资源调度建议',
                            extraImg: soIcon2
                        },
                        {
                            title: '备件库存优化',
                            desc: '动态调整备件库存，降低闲置成本',
                            extraImg: soIcon2
                        },
                        {
                            title: ' 智慧知识库',
                            desc: '整合行业知识资源',
                            extraImg: soIcon2
                        },
                        {
                            title: '运行文件管理',
                            desc: '标准化管理运行文档',
                            extraImg: soIcon2
                        }
                    ]
                },
                {
                    imgUrl: lunbo2,
                    title: '智慧航空',
                    desc: '包含飞行品质监控、航材库存优化、机队健康报告等15项功能，赋能航空维修全流程智能化',
                    // 智慧航空对应的子卡片
                    subCards: [
                        {
                            title: '飞行品质监控',
                            desc: '分析飞行数据，评估操作合规性',
                            extraImg: soIcon2
                        },
                        {
                            title: '燃油品质监控',
                            desc: '分析燃油数据，减少库存积压',
                            extraImg: soIcon2
                        },
                        {
                            title: '智能放行评估',
                            desc: 'AI驱动放行评估',
                            extraImg: soIcon2
                        },
                        {
                            title: '故障诊断',
                            desc: '精准定位故障点',
                            extraImg: soIcon2
                        },
                        {
                            title: '故障预测',
                            desc: '预测潜在故障风险',
                            extraImg: soIcon2
                        },
                        {
                            title: '航材库存优化',
                            desc: '动态调配航材库存',
                            extraImg: soIcon2
                        },
                        {
                            title: '维修工程管理',
                            desc: '全流程管控维修项',
                            extraImg: soIcon2
                        },
                        {
                            title: '可靠性管理',
                            desc: '保障设备运行可靠',
                            extraImg: soIcon2
                        },
                        {
                            title: '电子工单制作助手',
                            desc: '自动化生成维修单',
                            extraImg: soIcon2
                        },
                        {
                            title: '维修任务优化',
                            desc: '智能排程维修任务',
                            extraImg: soIcon2
                        },
                        {
                            title: '维修机位调度优化',
                            desc: '高效分配维修机位',
                            extraImg: soIcon2
                        },
                        {
                            title: '机队健康报告',
                            desc: '生成机队健康分析',
                            extraImg: soIcon2
                        },
                        {
                            title: '智慧维修知识库',
                            desc: '沉淀维修知识资产',
                            extraImg: soIcon2
                        },
                        {
                            title: '飞机残值管理',
                            desc: '动态评估飞机残值',
                            extraImg: soIcon2
                        },
                        {
                            title: '运行文件管理',
                            desc: '标准化管理运行文档',
                            extraImg: soIcon2
                        }
                    ]
                },
                {
                    imgUrl: lunbo4,
                    title: '智慧轨交',
                    desc: '聚焦在途维修助手、智能数据助手，实现轨道列车运维实时响应与数据驱动决策',
                    // 智慧轨交对应的子卡片
                    subCards: [
                        {
                            title: '在途维修助手',
                            desc: '列车运行中提供远程维修指导',
                            extraImg: soIcon2
                        },
                        {
                            title: '智能数据助手',
                            desc: '实时分析轨道运行数据',
                            extraImg: soIcon2
                        },
                    ]
                },
                {
                    imgUrl: lunbo3,
                    title: '智慧培训',
                    desc: '基于个性化培训成长助手，构建定制化学习路径，提升技术人员技能培养效率',
                    // 智慧培训对应的子卡片
                    subCards: [
                        {
                            title: '个性化学习路径',
                            desc: '根据技能短板生成定制课程',
                            extraImg: soIcon2
                        },

                    ]
                }
            ],
            // 企业大脑核心功能（含标记类型：check/yellow）
            enterpriseBrain: [
                { name: '11位权威航空合作伙伴', type: 'check' },
                { name: '国内机型种类覆盖率-92%', type: 'check' },
                { name: '国内航线种类覆盖率-85%', type: 'check' },
                { name: '国内机队覆盖率-29%（2024年）', type: 'check' },
                { name: '国内机队覆盖率-60%（2025年）', type: 'check' },
                { name: '运维成本减少-25~30%', type: 'yellow' },
                { name: '生产效率提高-30~40%', type: 'yellow' },
                { name: '备件库存减少-15~20%', type: 'yellow' },
                { name: '运行正常性提高-10~15%', type: 'yellow' },
            ],
            // 知识库核心功能
            knowledgeBase: [
                { name: '大模型 + 知识图谱辅维修', type: 'check' },
                { name: '智能辅助维修决策系统', type: 'check' },
                { name: '知识图谱优化资源调度', type: 'check' },
                { name: '知识图谱助应急处置', type: 'check' },
                { name: '应急处置方案智能检索', type: 'check' },
                { name: '个性化学习系统', type: 'check' },
                { name: '完善的智能体可观测性工具',type:'yellow' },
                { name: '复杂文档解析',type: 'yellow' },
                { name: '混合结构化数据处理', type: 'yellow' },
                { name: '智能体认知构建', type: 'yellow' },
                // { name: '广泛的大模型支持', type: 'check' },
                // { name: '完善的智能体开发工具及套件', type: 'check' },
                // { name: '完善的智能体可观测性工具', type: 'check' },
                // { name: '完善的集成与被集成', type: 'check' },
                // { name: '企业级内容安全', type: 'check' },
                // { name: '多智能体协同', type: 'check' },
                // { name: '动态规划与执行', type: 'yellow' },
                // { name: '复杂文档解析', type: 'check' },
                // { name: '多模态内容支持', type: 'check' },
                // { name: '自动化知识构建', type: 'yellow' },
                // { name: '可自定义的知识增强', type: 'check' },
                // { name: '混合结构化数据处理', type: 'check' },
                // { name: '智能体认知构建', type: 'yellow' },
                // { name: '企业级数据安全', type: 'check' }
            ],
            // 底部技术优势
            techAdvantage: [
                '国内领先的PHM平台产品落地理据及愿景',
                '国内领先的PHM平台产品和产品完成度',
                '企业大脑及AI知识产品技术领先优势及2-3个月',
                '业务场景及AI模型的实践经验处于国内顶尖水准'
            ],
            // 底部 Agent 矩阵优势
            agentAdvantage: [
                '基于业务目标、大量真实飞机数据支持、过往经验输入及输出资源建议',
                '基于业务目标/过往经验/活动目标，生成项目排期计划',
                '利用大模型能力，面向差异群体，提供多模态创意方案'
            ]

        };
    },
    mounted() {
        const animateElements = this.$el.querySelectorAll('.animate-on-scroll');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 元素进入视口，添加可见类触发动画
                    entry.target.classList.add('visible');
                } else {
                    // 元素离开视口，移除可见类重置动画
                    entry.target.classList.remove('visible');
                }
            });
        }, {
            threshold: 0.1  // 元素可见度达到10%时触发
        });

        // 观察所有需要动画的元素（不移除观察）
        animateElements.forEach(element => {
            observer.observe(element);
        });

        this.scrollObserver = observer;
    },
    beforeDestroy() {
        // 组件销毁时清理监听器
        if (this.scrollObserver) {
            this.scrollObserver.disconnect();
        }
    }

};
</script>

<style scoped>
.hoverImg {
    transition: all 0.3s ease;
}

.hoverImg:hover {
    background-color: black;
    transform: translateY(-15px);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-200px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(200px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.3s;
}

.animate-on-scroll.slide-in-left {
    transform: translateX(-200px);
}

.animate-on-scroll.slide-in-right {
    transform: translateX(200px);
}

.animate-on-scroll.visible.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-on-scroll.visible.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

/* 子卡片容器：核心布局控制 */
.sub-cards-container {
    display: flex;
    flex-wrap: wrap;
    /* 开启自动换行 */
    gap: 10px;
    /* 卡片间距（可调整） */
    justify-content: flex-start;
    /* 左对齐，也可改为 space-between */
}

/* 单个卡片：控制每行数量 */
.customer-portrait-card {
    /* 每行最多7个：(100% - 6个间隙) / 7 */
    flex: 0 0 calc((100% - 6*10px)/7);
    min-width: 120px;
    /* 防止极窄屏幕变形 */
    max-width: 180px;
    /* 限制最大宽度 */
    /* 原有样式（背景、圆角、动画等）保持不变 */
}

/* 响应式适配：不同屏幕尺寸调整每行数量 */
@media (max-width: 1200px) {
    .customer-portrait-card {
        /* 每行最多4个 */
        flex-basis: calc((100% - 3*10px)/4);
    }
}

@media (max-width: 768px) {
    .customer-portrait-card {
        /* 每行最多2个 */
        flex-basis: calc((100% - 1*10px)/2);
    }
}

.portrait-icon {
    width: 65px;
    height: 50px;
    margin-left: 10px;

}

.card-title {
    min-width: 144px;
    font-size: 18px;
}

.customer-portrait-card {
    display: flex;
    margin-right: 20px;
    width: 300px;
}

.icon-panel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.advantage-section {
    background: url('/public/images/微信图片_20250605093721.png') center/cover no-repeat;
    /* 替换为实际背景图 */
    padding: 60px 20px;
    color: #fff;
    position: relative;
}

/* 顶部标题 */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.green-bar {
    width: 4px;
    height: 50px;
    background: #00ff88;
    margin-right: 15px;
}

.main-title {
    font-size: 34px;
    font-weight: 700;
}

.sub-title {
    font-size: 16px;
    color: #00ff88;
    margin-left: 10px;
}

/* 核心功能对比区 */
.core-features {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 40px;
    margin-bottom: 60px;
}

.feature-card {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 24px;
    width: 45%;
    min-width: 320px;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.icon {
    width: 48px;
    height: 48px;
    margin-right: 16px;
    background: #00ff88;
    mask-size: contain;
    -webkit-mask-size: contain;
}



.header-text {
    line-height: 1.4;
    font-size: 25px;
}

/* 表格样式 */
.feature-table {
    width: 100%;
    border-collapse: collapse;
}

.feature-table th,
.feature-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #444;
    text-align: left;
    font-size: 18px;
}

.feature-table th {
    background: #111;
}

/* 勾选样式 */
.check::before {
    content: '✔';
    color: #00ff88;
}

.yellow::before {
    content: '✓';
    color: #ffd700;
}

/* 底部优势板块 */
.bottom-features {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 40px;
}

.feature-block {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 24px;
    width: 45%;
    min-width: 320px;
}

.feature-block h3 {
    color: #00ff88;
    margin-bottom: 16px;
}

.feature-block ul {
    list-style: none;
    padding: 0;
}

.feature-block li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.feature-block li::before {
    content: '•';
    color: #00ff88;
    position: absolute;
    left: 0;
    top: 2px;
}

/* 响应式适配 */
@media (max-width: 768px) {

    .feature-card,
    .feature-block {
        width: 100%;
    }
}

.carousel-container {
    position: relative;
    /* 定位基准 */
    margin: 0 auto;
    max-width: 1200px;
}

/* 轮播图样式 */
.carousel-img {
    width: 100%;
    height: 450px;
    /* 固定高度（根据需求调整） */
    object-fit: cover;
    /* 图片填充方式 */
    border-radius: 12px;
}

/* 叠加内容容器 */
.carousel-overlay {
    position: absolute;
    /* 绝对定位叠加在图片上 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    /* 内边距 */
    background: rgba(0, 0, 0, 0.4);
    /* 半透明遮罩（增强文字可读性） */
    border-radius: 12px;
}

/* 标题样式 */
.overlay-title {
    color: #00ff88;
    /* 暗绿色标题 */
    font-size: 28px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* 文字阴影 */
}

/* 描述文字样式 */
.overlay-desc {
    color: #fff;
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* 额外小图片样式 */
.overlay-extra-img {
    position: absolute;
    /* 定位在右下角 */
    right: 40px;
    bottom: 40px;
    width: 80px;
    /* 小图标尺寸 */
    height: 80px;
    opacity: 0.9;
    /* 小图标透明度 */
}

/* 响应式调整（手机端） */
@media (max-width: 768px) {
    .carousel-img {
        height: 300px;
    }

    .carousel-overlay {
        padding: 20px;
    }

    .overlay-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .overlay-desc {
        font-size: 14px;
    }

    .overlay-extra-img {
        width: 60px;
        height: 60px;
        right: 20px;
        bottom: 20px;
    }
}

/* 顶部标题栏 */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.line {
    flex: 1;
    height: 2px;
    background-color: #9eff00;
}

.carousel {
    height: 800px;
    padding-bottom: 200px;
}

.carousel-img {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-tech-base {
    background-color: #000;
    padding: 50px 20px;
    color: #fff;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.green-bar {
    width: 5px;
    height: 50px;
    background-color: #9eff00;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

h2 {
    display: inline-block;
    vertical-align: middle;
    font-size: 34px;
    color: white;
    letter-spacing: 1px;
}

.sub-desc {
    font-size: 14px;
    color: #aaa;
    margin-top: 10px;
}

.content-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto auto 200px auto;
}

.left-column {
    width: 760px;
    padding: 30px;
    background: linear-gradient(to top, #0a0a0a 0%, #030315 100%);
    /* border-left: 5px solid #00ff88; */
}

.feature-item {
    position: relative;
}

.item-number {
    font-size: 32px;
    color: #00ff88;
    font-weight: bold;
    margin-bottom: 15px;
    background-color: #00ff881a;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

h3 {
    font-size: 22px;
    color: #00ff88;
    margin-bottom: 20px;
    border-bottom: 1px solid #00ff8833;
    padding-bottom: 10px;
}

ul {
    list-style: none;
    padding-left: 0;
}

li {
    font-size: 21px;
    line-height: 1.8;
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

li::before {
    content: "▸";
    color: #00ff88;
    position: absolute;
    left: 0;
    top: 2px;
}

.right-column {
    position: relative;
    top: 135px;
    flex: 1;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.main-visual {
    width: 500px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

.sub-visual {
    width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

@media (max-width: 992px) {
    .content-container {
        flex-direction: column;
    }

    .left-column,
    .right-column {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 24px;
    }

    .left-column {
        min-width: auto;
    }

    .main-visual {
        width: 100%;
    }
}

.tech-website {
    font-family: 'Arial', sans-serif;
    color: #fff;
    background-color: #0a0a0a;
}

/* 横幅部分样式 */
.banner {
    height: 800px;
    /* 调整高度匹配设计 */
    background-image: url('/public/images/newBanner1.png');
    /* 图2的绿色山脉纹理背景 */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-content {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.4);
}

.title-wrap h1 {
    font-size: 40px;
    color: #fff;
    text-shadow: #9eff00;
    /* 文字 glow 效果 */
}

/* 绿色竖线装饰（左右两侧） */
.title-wrap::before,
.title-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 40px;
    background-color: #9eff00;
}

.title-wrap::before {
    left: -90px;
}

.title-wrap::after {
    right: -90px;
}

.tag-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    border-radius: 20px;
    /* 圆角 */
    font-size: 14px;
    color: #fff;
}

.prefix {
    color: #ccc;
    /* 浅灰色前缀文字 */
}

.tag {
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.1);
    /* 透明白色背景 */
    border-radius: 12px;
    /* 标签圆角 */
}

.conjunction {
    color: #ccc;
    /* 浅灰色连接词 */
}






.star-products {
    padding: 50px 0;
    background-color: #000;
}

.product-scroll {
    display: flex;
    overflow-x: auto;
}

.product-item {
    min-width: 200px;
    padding: 10px;
    margin: 0 10px;
    background-color: #9eff0022;
    border-radius: 8px;
}

.user-cases {
    position: relative;
    padding: 50px 0;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9eff00;
    font-size: 24px;
    cursor: pointer;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.advantage-section {
    padding: 50px 0;
    background-color: #111;
}

.advantage-table {
    display: flex;
    justify-content: space-around;
}

.table-column {
    width: 45%;
}

.case-section {
    padding: 50px 0;
    background-color: #000;
}

.case-item {
    text-align: center;
    padding: 20px;
}

.case-item img {
    width: 80%;
    height: auto;
    border-radius: 8px;
}

footer {
    padding: 30px 0;
    background-color: #111;
    text-align: center;
}

.logo {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}

.contact-info,
.social-links {
    margin: 10px 0;
}

.social-links a {
    margin: 0 10px;
}

/* 响应式调整（示例） */
@media (max-width: 768px) {

    .solution-cards,
    .advantage-table {
        flex-direction: column;
    }

    .card,
    .table-column {
        width: 100%;
        margin: 10px 0;
    }
}

.solutions-section {
    background-color: #111;
    padding: 96px 20px;
    text-align: center;
    height: 700px;
}

.title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.main-title {
    background-color: #acda02;
    color: #fcfeff;
    padding: 6px 22px;
    font-size: 20px;
    font-weight: 700;
}

.sub-title {
    color: #fcfeff;
    margin-left: 12px;
    font-size: 16px;
}

.cards-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.solution-card {
    flex: 1;
    width: 445px;
    height: 450px;
    background-color: #1b1b1b;
    border-left: 3px solid #acda02;
    padding: 25px;
    text-align: left;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 30px;
}

.solution-card:hover {
    background-color: black;
    transform: translateY(-15px);
}

.icon {
    width: 36px;
    height: 36px;
    background-color: #acda02;
    mask-size: contain;
    -webkit-mask-size: contain;
    margin-bottom: 15px;
}

.gear-icon {
    mask-image: url('/public/images/soIcon1.png');
    -webkit-mask-image: url('/public/images/soIcon1.png');
}

.puzzle-icon {
    mask-image: url('/public/images/soIcon2.png');
    -webkit-mask-image: url('/public/images/soIcon2.png');
}

.cycle-icon {
    mask-image: url('/public/images/soIcon3.png');
    -webkit-mask-image: url('/public/images/soIcon3.png');
}

h3 {
    color: #acda02;
    font-size: 26px;
    margin-bottom: 12px;
}

p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.action-btn {
    position: relative;
    top: 40px;
    background: transparent;
    border: 2px solid #acda02;
    color: white;
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background-color: #acda02;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cards-grid {
        flex-direction: column;
    }

    .solution-card {
        border-left: none;
        border-top: 3px solid #9eff00;
    }
}
</style>